<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="./lib/vue.js"></script>
</head>

<body>
  <template id="login">
    <div>
        <h3>这是登录组件</h3>
    </div>
  </template>

  <template id="register">
    <h3>这是注册组件</h3>
  </template>

  <div id="app">
    <a href="" @click.prevent="flag=true">登录</a>
    <a href="" @click.prevent="flag=false">注册</a>
    <hr/>
        <login v-if="flag"></login>
        <register v-else="flag"></register>
  </div>

  <script>

    Vue.component('login',{
        template: '#login'
    });


    Vue.component('register',{
        template: '#register'
    });


    var vm = new Vue({
      el: '#app',
      data: {
          flag: true
      },
      methods: {

      }
    })
  </script>



</body>

</html>
